<template>
  <div class="all-item">
    <div v-if="list.length !== 0">
      <div class="item" v-for="(item, index) in list" :key="index" @mouseenter.stop="showTime(index)" @mouseleave.stop="showTime(index)" @click="hideMenu(index)">
        <div class="time">
          <span title="菜单" style="cursor: pointer;" v-if="item.showTime" @click.stop="showMenu(index)">···</span>
          <span class="span-time" v-else>{{ item.time }}</span>
        </div>
        <div class="summarize">
          <p>{{ item.text }}</p>
        </div>

        <div class="menu">
          <div @click="openTip(index)">打开笔记</div>
          <div @click="delTip(index)">删除笔记</div>
        </div>
      </div>
    </div>

    <div v-else>
      没有代办事项
    </div>

  </div>
</template>

<script>

import { mapState, mapMutations } from 'vuex'

export default {
  data () {
    return {
      isShowTime: [],
      isShowMenu: true,
      showMenuTimer: null,
      menu: null,
      index: 0
    }
  },

  computed: {
    ...mapState(['text', 'info', 'isShowTip', 'searchInfo', 'searchContent']),
    list () {
      if (this.searchContent === '') return this.info
      return this.searchInfo
    }
  },

  methods: {
    ...mapMutations(['changeShowTime', 'delTip', 'changeShowTip', 'showOriginText']),

    showMenu (index) {
      this.menu = document.querySelectorAll('.menu')
      // 排他, 使其他的全部隐藏
      this.hideMenu()
      let opacity = 0
      clearInterval(this.showMenuTimer)
      if (!this.isShowMenu) {
        this.menu[index].style.opacity = 0
        this.menu[index].style.display = 'none'
        this.isShowMenu = true
        return
      }
      this.isShowMenu = false
      this.menu[index].style.display = 'block'
      this.showMenuTimer = setInterval(() => {
        opacity += 0.1
        this.menu[index].style.opacity = opacity
        if (opacity > 1) clearInterval(this.showMenuTimer)
      }, 45)
    },

    showTime (index) {
      this.changeShowTime(index)
    },

    hideMenu () {
      // 排他, 使其他的全部隐藏
      this.menu.forEach(item => {
        item.style.opacity = 0
        item.style.display = 'none'
      })
    },

    openTip (index) {
      this.changeShowTip(true)
      this.showOriginText(index)
    }
  }
}
</script>

<style lang="less" scoped>
.all-item {
  margin: 0 10px;
  height: 100%;
  overflow: auto;
}

.item {
  position: relative;
  margin-top: 10px;
  border-top: 3px solid rgb(68, 68, 68);
  background-color: rgb(51, 51, 51);

  &:hover {
    background-color: rgb(65, 65, 65);
  }

  .time {
    height: 26px;
    line-height: 26px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
    // 禁止文字被选中
    user-select: none;

    span {
      color: rgb(210, 210, 210);
    }

    .span-time {
      font-size: 10px;
    }
  }

  .summarize {
    padding: 0 15px 15px 15px;
    p {
      line-height: 20px;
      text-align: left;
      font-size: 13px;
      color: rgb(238, 238, 238);
    }
  }

  .menu {
    display: none;
    width: 100px;
    height: 60px;
    padding: 5px 0;
    opacity: 0;
    position: absolute;
    top: 25px;
    right: 5px;
    z-index: 2;
    border: 1px rgb(24, 24, 24) solid;
    background-color: rgb(33, 33, 33);
    font-size: 17px;
    color: rgb(238, 238, 238);

    div {
      height: 24px;
      line-height: 24px;
      cursor: pointer;

      &:hover {
        background-color: rgb(76, 76, 76);
      }
    }
  }
}
</style>
